import React, { Component } from 'react';
import { Form, Input,Modal,message } from 'antd';
import axios from 'axios';
import qs from 'qs';

const FormItem = Form.Item;
const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
};

class AuthorModal extends Component {

        constructor(props) {
                super(props);
                //console.log(props)
        }
        handleOk = (e) => {
                console.log(e);
                e.preventDefault();
                this.props.form.validateFields((err, values) => {
                        if (!err) {
                                //console.log('Received values of form: ', values);
                                let formData=values
                                if(this.props.record.actionType==="mod")
                                {
                                        formData.id=this.props.record.id
                                }

                                let sendJson=qs.stringify(formData)
                                if(this.props.record.actionType==="add")
                                {
                                        this.insertRecord(sendJson)
                                }
                                else
                                {
                                        this.updateRecord(sendJson)
                                }
                        }
                });
        }
        insertRecord=(sendJson)=>{
                let that=this
                axios.post("/api/?s=Author.insert",sendJson)
                    .then(function (response) {
                            let result=response.data
                            if(result.ret===200)
                            {
                               that.handleCancel()
                               that.props.refresh()
                               message.success("添加成功！")
                            }
                            else
                            {
                               message.error(result.msg)
                            }

                    })
                    .catch(function (error) {
                            console.log(error);
                    })
        }

        updateRecord=(sendJson)=>{
                let that=this
                axios.post("/api/?s=Author.update",sendJson)
                    .then(function (response) {
                            let result=response.data
                            if(result.ret===200)
                            {
                                    that.handleCancel()
                                    that.props.refresh()
                                    message.success("修改成功！")
                            }
                            else
                            {
                                    message.error(result.msg)
                            }

                    })
                    .catch(function (error) {
                            console.log(error);
                    })
        }

        handleCancel = (e) => {
                console.log(e);
                this.props.changeStatus()
        }
        render() {
                const { getFieldDecorator } = this.props.form;
                return (
                    <div>
                            <Modal
                                title={this.props.record.actionType==="add"?"新增":"修改"}
                                visible={this.props.viewModal}
                                onOk={this.handleOk}
                                okText={"确定"}
                                cancelText={"取消"}
                                onCancel={this.handleCancel}
                            >
                                    <Form onSubmit={this.handleSubmit}>
                                            <FormItem {...formItemLayout} label="用户名">
                                                    {getFieldDecorator('username', {
                                                            rules: [{
                                                                    required: true,
                                                                    message: '请输入用户名',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入用户名"/>
                                                    )}
                                            </FormItem>
                                            <FormItem {...formItemLayout} label="密码">
                                                    {getFieldDecorator('passwords', {
                                                            rules: [{
                                                                    required: this.props.record.actionType==="add"?true:false,
                                                                    message: '请输入密码',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入密码"  type="password"/>
                                                    )}
                                            </FormItem>
                                            <FormItem {...formItemLayout} label="姓名">
                                                    {getFieldDecorator('truename', {
                                                            rules: [{
                                                                    required: true,
                                                                    message: '请输入用姓名',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入用姓名"/>
                                                    )}
                                            </FormItem>
                                            <FormItem {...formItemLayout} label="邮箱">
                                                    {getFieldDecorator('email', {
                                                            rules: [{
                                                                    required: true,
                                                                    message: '请输入邮箱号',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入邮箱号"/>
                                                    )}
                                            </FormItem>
                                        </Form>
                            </Modal>
                    </div>
                );
        }
}
export default Form.create({
        mapPropsToFields(props) {
                return {
                        username: Form.createFormField({
                                value: props.record.username,
                        }),
                        email: Form.createFormField({
                                value: props.record.email,
                        }),
                        truename: Form.createFormField({
                                value: props.record.truename,
                        }),
                };
        },
})(AuthorModal)